<template>
	<view>
		<!-- 头部 -->
		<banner></banner>
		<!-- 菜单导航 -->
		<u-swiper :list="list" height="300"></u-swiper>
		<!-- 选择菜单 -->
		<menuList :menuLists="lists" 
			imgSize="200rpx"
			@listenEvent="myEvent" 
			@listenMenu="myMenu"></menuList>
		<!-- 购物车 -->
		<view class="shop" v-show="shoppingCart">
			<u-row gutter="16" justify="space-between">
				<u-col span="8">
					<view @click="show = true">
						<u-icon name="shopping-cart" color="red" size="80" class="shop_icon"></u-icon>
						<view class="shop_number">5</view>
					</view>
				</u-col>
				<u-col span="4">
					<view>
						<u-button type="error">结算</u-button>
					</view>
				</u-col>
			</u-row>
		</view>
		<!-- 购物车模态框 -->
		<u-popup v-model="show" mode="top" height="500">
			<view class="product">
				<u-row gutter="16" justify="space-between" v-for="(item,index) in 4">
					<u-col span="3">
						<view>
							<u-image width="80%" height="auto" src="/static/images/ad.png" mode="widthFix"></u-image>
						</view>
					</u-col>
					<u-col span="5">
						<view>
							<view>冰红茶</view>
							<view>加冰/加糖</view>
							<view>￥8</view>
						</view>
					</u-col>
					<u-col span="4">
						<view><u-number-box v-model="number" @change="numberChange"></u-number-box></view>
					</u-col>
				</u-row>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import menuList from '@/components/menu/menuList.vue';
	import banner from '@/components/menu/banner.vue';
	export default {
		components:{
			menuList,
			banner
		},
		data() {
			return {
				shoppingCart:false,
				show:false,
				number:1,
				list: [{
						image: 'https://images.qmai.cn/s23107/2020/04/30/b3af19e0de8ed42f61.jpg?imageView2/2/w/600/h/600',
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
					}
				],
				lists:[{
					title:"新品推荐",
					goods:[{
						label:"泡泡水",
						img:"/static/images/ad.png",
						hot:'50',
						price:'8'
					},{
						label:"蜜桃水",
						img:"/static/images/ad.png",
						hot:'54',
						price:'9'
					},{
						label:"蜜桃四季春",
						img:"/static/images/ad.png",
						hot:'54',
						price:'9'
					},{
						label:"满杯百香果",
						img:"/static/images/ad.png",
						hot:'54',
						price:'9'
					},{
						label:"冰鲜柠檬水",
						img:"/static/images/ad.png",
						hot:'54',
						price:'9'
					},{
						label:"冰鲜柠檬水",
						img:"/static/images/ad.png",
						hot:'54',
						price:'9'
					},{
						label:"冰鲜柠檬水",
						img:"/static/images/ad.png",
						hot:'54',
						price:'9'
					},{
						label:"冰鲜柠檬水",
						img:"/static/images/ad.png",
						hot:'54',
						price:'9'
					},{
						label:"珍珠奶茶",
						img:"/static/images/ad.png",
						hot:'54',
						price:'9'
					}]
				},{
					title:"热销产品",
					goods:[{
						label:"冰淇淋",
						img:"/static/images/ad.png",
						hot:'5w',
						price:'155'
					},{
						label:"奶昔",
						img:"/static/images/ad.png",
						hot:'50',
						price:'15'
					}]
				},{
					title:"热销产品2",
					goods:[{
						label:"冰淇淋",
						img:"/static/images/ad.png",
						hot:'5w',
						price:'155'
					},{
						label:"奶昔",
						img:"/static/images/ad.png",
						hot:'50',
						price:'15'
					}]
				}]
			}
		},
		methods: {
			myEvent(e){
				console.log(e)
				console.log(e.label)
				this.shoppingCart = true
			},
			myMenu(e){
				console.log(e)
				console.log(e.title)
			},
			numberChange(e){
				console.log(e)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.shop{
		width: 100%;
		height: 110rpx;
		position: fixed;
		right: 0rpx;
		/* #ifdef H5 */
		bottom: 100rpx;
		/* #endif */
		/* #ifndef H5 */
		bottom: 0rpx;
		/* #endif */
		background-color: #F3F4F6;
		text-align: center;
		// opacity: 0.8;
	}
	.shop_icon{
		background-color: #FFFFFF;
		padding: 10rpx;
		border-radius: 50%;
		margin-top: -10rpx;
	}
	.shop_number{
		margin-top: -90rpx;
		background-color: red;
		width: 45rpx;
		position: relative;
		z-index: 9999;
		padding: 5rpx;
		color: #FFFFFF;
		left: 90rpx;
		text-align: center;
		border-radius: 50%;
	}
	.product{
		padding: 20rpx;
	}
</style>
